Intro | Recap | Why use SPFx | SPFx vs Teams Toolkit | How to get started | VSCode Insiders | Creating a new project | Starting from scratch | Conclusion
What We’re Building | How it Works | How To Build | Automatically Getting Your Emails | Automatically Sending Emails | Automatically Getting Your Schedule | Automatically Updating Project Management Software | Automatically Creating Meetings | Final Notes and Next Steps
Intro | Research the topic | Generating the answer | Creating the title | Creating the outline | Writing the book | Editing the book | Exporting the book | Conclusion
Introduction | What is iAuditor | Types of integrations | Highlevel integrations | Zapier integration | Microsoft Flow integration | SDK | Power BI | Importing Data | Example
Introduction | SharePoint Framework at a high-level | SharePoint Framework at a low-level | How does workbench & debugging impact the SPFx runtime? | Testing and debugging SharePoint Framework extensions
Introduction | Chapter overview | History of SharePoint development | SharePoint Portal Server 2003 | SharePoint Server 2007 | SharePoint Server 2010 | SharePoint Server 2013 & SharePoint Online | SharePoint Server 2016 & JavaScript injection | Introducing the SharePoint Framework | SPFx & SharePoint Server 2016 | SPFx & SharePoint Server 2019 | DEMO: Client-Side Web Parts | Comparing SharePoint development options | SPFx vs. farm solutions | SPFx vs. sandboxed solutions | SPFx vs. add-ins | SPFx vs. JavaScript injection | SharePoint Framework documentation & resources
Introduction | What’s new & is generally available (GA)? | Form customizer context object improvements | Microsoft Graph JS SDK & middleware | ACEs - accessibility improvements | Project update #1: dataVersion in manifest | Project update #2: list of supported SDKs | Project update #3: silence SASS dependency warnings | What’s changed & is generally available (GA) | Microsoft Teams JavaScript SDK updated to v2 | Upgrade support for React to v17.0.1 | Deprecated @microsoft/office-ui-fabric-react-bundle in favor of @fluentui/react | Drop support for Node.js v12 & Node.js v14 | What’s new & in beta / developer preview? | Web Part Top Actions
WHAT is the SharePoint Framework? | SharePoint Framework: : customization & extensibility model | Page context | SPEx is mobile friendly | Simplified permissions | SPEx is for first-party & third-party developers | What can you build with the SharePoint Framework | Web Parts | Extension: Application Customizer | Extensions: List view command set | Extensions: Field customizer | Extension: Search query extension
Introduction | What's New - Data Visualization template for ACES | Dependency Updates | New Web Part Property Pane Accessibility Improvements | Deprecations
Introduction | Who can use the SharePoint Framework? | SPFx & SharePoint Online | SPFx & SharePoint Server 2016 | SPFx & SharePoint Server 2019 (& SE) | Where can you use the SPFx? | Features only available in SharePoint Online | SharePoint page customization areas
Introduction | What's new in SPFx v1.15? | List form customizers - new extension type | Image Helper API | Adaptive Card Extensions: geolocation Action types | What's changed in SPFx v1.15? | Node.js v16 support | Projects default to TypeScript v4.5 | TSLint replaced with ESLint | Fluent UI React upgraded to v7.185.7 | Fluent UI Core updated to v11.0.1 | ReactJS updated? | Changes to web part template code | Changes to ListView Command Set template code | Library components - now get a feature? | 19 bug fixes
Introduction | Chapter overview | Course author introduction | Course bundles (Starter, Fundamentals & Ultimate) & their contents | How to get the most out of the course
Introduction | Support for newer Microsoft Graph JavaScript SDKs | Support for Node.js v16 (maybe?) | Updated default code for new list view command set extensions | Updated default code for web part templates
Introduction | What's the problem? | Convert a class component to a functional component | Implement state & refresh the web part | Add button & event handler | Add event handler when state property changes | Initialize the component with useEffect()
Demo - Ramin Ahmadi (Content and Code) – @raminahmadi1986 - Print list items using templates with SPFx list view command set | David Warner II (Catapult Systems) – @davidwarnerii - Using SPFx Library components in your solutions | Demo - Federico Porceddu (Avanade) – @FedericoSPDev - Modern Page Model handling with PnP/PnPjs | Vesa Juvonen (Microsoft) – @vesajuvonen - Modern page template experience with app page capability
Introduction | Automatic Azure Service Principal registrations | ACE QuickView cards support deferred loading | Updated ESLint rule configurations | ACE media selectors promoted to GA | What's Fixed?
conditional formatting inside a sharepoint list inside a sharepoint modern site | apply formatting to an entire view of a sharepoint list | associate a new team site with a hub | aggregate content from the current site collection | add additional columns | change the height of the data bar | set a fixed height for the data bar | inserting images | set the alignment
Yo Generator: Create Web Part | Web Part folder structure & File info | Gulp Serve & Trust and create a certificate | Using local workbench to test your web part | Deploy Package to the App Catalog | Add deployed web part to Custom page
Sharepoint development Journey to Sharepoint Framework (SPFx) | Add-In Model and JavaScript Embedding | What is Sharepoint | Tools for Sharepoint | Setup Sharepoint SPFX Environment
Intro | Trigent Software in a brief | Evolution of SharePoint Development | JavaScript Injection | SharePoint add-in/App model | SharePoint Framework (SPFx) | SharePoint Page Structure | Modern Page App | SharePoint Framework (SPFx) Prerequisites | Setting up the Environment | Client Side web parts using SPFx | Client-Side Web Part Build Flow- Demo | Operations in Azure | Azure Storage | Server Side Tool Comparison | SharePoint Workbench | BaseClient Side Web Part | Framework Development Process - Demo | Deploy Web Part Assets to CDN- Demo | Add an Add-in | Page/Web Part Types Crossover | Q&A
Introduction | Adding a Filter Web Part | Adding a Choice Filter | Connecting the Choice Filter | Connecting the Number Filter | Conditional Formatting | Due Date Formatting
Introduction | In-video chapter "jump" links | No more "death by PowerPoint" | Clickable in-video links | Dynamic lesson notes | Easy-to-find course changelog | Lessons in 1080p (up from 720p) | What's next with the course updates?
Course Outline | Introduction To SPFX Development | SharePoint Evolution Across Versions | How SPFX is different? | Main Features of SPFX | SPFX ToolChain | ALM of the SPFX Client Side Web Part
A Development Environment | Light weight Components / Tools Used | Skills You Need to Embrace | 'node is not recognized as an internal or external command | Install Packages with NPM behind Corporate Proxies If your development environment is behind a corporate proxy | Yeoman (SharePoint Solution Generator) | Visual Studio Code | Workbench | Updating NPM packages
Overview | What's new in SPFx v1.14? | Image Helper API | Updated SPFx generator prompts | New & updated SPFx project templates | New APIs for all component types | New APIs for web parts | Updated APIs for web parts | New command set API: force list view re-render | New command set API: disable commands | New command set API: new list view update event | New ACE API: card caching | New ACE API: new action types | New ACE API: action error handler event | What's fixed? | What's gone? | REMOVED: SPFx for Office Add-ins | REMOVED: legacy Microsoft Graph API | DEPRECATED: command set list view update event | DEPRECATED: EnvironmentType.Local
Why SharePoint Framework? | Setup your system | Setup SPFx in Docker using WSL | Dev Container: Reopen in container | Gulp Serve & Add Web Part to Site
Introduction | What's the problem? | Convert a class component to a functional component | Implement state & refresh the web part | Add button & event handler | Add event handler when state property changes | Initialize the component with useEffect()
Introduction | What you need to know | Getting Started | Steps | Multiple Web Parts | App Catalog | Open Code | Source Files | Render Method | Config File | TypeScript | Debugging | Deploying
Jenkins NS | Agenda | Office 356 APIs | Overview of Microsoft Graph | Microsoft Graph Access user, group and organizational data | Consume Microsoft Graph | AadHttpClient | MSGraphClient object | API Permissions | API access | Why Isolated web parts? | Isolated web parts benefits | References...
Introduction | Agenda | Recap | PMPJS | CLI | Reusable Components | DMBS VFX Generator | Story | Code | Permissions | Why do we have this sample | Key features | User Roles | Request to Join Private Group | One by One Function | Join a Group | Join a Group Example | Code Walkthrough | Flow Walkthrough
Introduction & Basic of SharePoint | SharePoint SPFx Framework | Create Tenant | Microsoft 365 & SharePoint Admin | SharePoint Page & Add Web Part to your page | Recap
Introduction | History of the SharePoint Framework & SharePoint Server Deployments | What's the point of a small update? | What about SharePoint Server 2013 & 2019?
Purpose of this Call | Sharepoint Framework Update | Roadmap | Integration with Microsoft Graph | Update on the Reusable Controls | Sharepoint Framework Property Controls | Property Field Code Editor | Field Taxonomy Renderer | Demo | Client-Side Pages | Set Properties | Columns Sections and Web Parts | Editing these Webparts on an Existing Page | Loading an Existing Page | And I'M Going To Update the Property of that Text and Then I'M GonNa Get the Next Section Down so You Remember this Is the Second Section on the Page and I'M GonNa Get the Second Column in that Section Meaning the Right Most Column I'M GonNa Get that Control Which I Happen To Know as a Client-Side Web Part Again It's Indexes the Zero It's the First Control in that Column and I'M GonNa Set Its Property so this Is the Same as We Saw above I'M Using Set Properties with a Typing Method To Describe the Available Properties and Give Me some Type Checking | And I'M GonNa Give It a Different Youtube Url Here to What Might Be a Little Bit More Work Appropriate Video and Then My Managers Also Told Me I Should Disable the Comments on this Page So I Need To Disable the Comments on the Page Which Is a Separate Method That Actually Also Returns a Promise So I'M GonNa First Store My Content Changes and Then I'M GonNa Disable Comments on the Page as We You Know To Follow What My Managers Asked Me To Do So I'M GonNa Run that Code and Then while that's Spinning Up I Look Back Over to the I Am Window Here Try and Catch Up on What I Might Have Missed | It's Available on the Pnp Youtube Channel As Well as Linked off the Readme for the Pp Libraries Check that Out and Really Help You Walk through Transitioning to the New Blue Ah-Ah-Ah-Ah Pardon Me to the New Library Is from Sp P and Pjs and You'Ll Notice Down Here at the Bottom As Well the Comments Are Gone So Our Updates Have Completed and Just To Close Our Thought Out You Can See the Sections Are Limited so if I Kind Of Mouse over this You Can Sort Of See the Border Here That Would Be the Max Width of the Section so They'Re Not Actually the Full Width of the Page They'Re Rather the Full Width Available to that Canvas | I Will Mention You Can Also Just Reenable Comments There's a Method Call Just for that As Well So Jumping Back to the Presentation Will Though I Believe You Are Up Next Yeah Can You Hear Me Yes Sir Great and So this Will Be Velen's Demo So Take Over Whenever You'Re Ready To Go Let's See I'Ve Started the Sharing Just Let Me Know When You Can See the Screen Hello Everyone My Name Is Link Your Gif and I'M Not Sure When Developer | But It's the Main Goal for that Web Part Is To Be Able To Do that if You Can See We Can Slide In with You Show Different Pages with Cards Depending on that's Sliding Gesture That Should Work on Mobile Phones As Well and Then We Have that Nice Little Paging at the Bottom Here Where You Can Directly Come from Page to Page and if You Can See that Slides Three That Are Three Cards of the Time and We Have Nice Nice Little Effect Here on There on the Right that Showing that Actually that that's a Slider these Things Can Be Controlled of All the Time of that in a Minute but Let's Go to to the Properties and See What Else Is There | These Things Can Be Controlled of All the Time of that in a Minute but Let's Go to to the Properties and See What Else Is There So if We Go to the Properties We Can See Bunch More a Bunch of More Properties Here and and I Can Enable Additional Navigation Here and Then You Can See those Arrows on the Left and on the Right and I Can Disable the Nation I Can Control the Slides per View What Else We Have How To Play so We Can Turn that into a Carousel like that That Just Place Cards I Can Show You that Let's See if They Have To Refresh | Means that if We End Here We Can Enable that Loop and if I Refresh the Page Whenever I Get to the Last Page Here if I Look It Will Start from the First Again so some some Cool Features Implemented Here in in the Property Panel and You Have that Accordion That I'M Going To Show You from the Fold How It's Been Done a Little Bit Nostalgic about the Old School by Part C We Have Advanced Section at the Bottom Now Let's Go to the Code and in See What's | And They Say that this Is a Modern Mobile Touch Slider with Hardware Accelerated Transitions Sounds Cool but They Also Have a Good Demo Page Where You Can See Loads of Different Options for Sliding and for Example You Might Have Effects like that Parallax or Laser Moving so We Can Bring Even More Features to Our Web Part I Just Try To Embed Few of Them but You Can Have Major Property Come Over Here Now Back to the Code the the Web Part Itself if We Go Here We Can See that We Are Surely Yeah We Can See the Properties Here from the Property Panel | Options As Well but You Can Bring those as Other Web Properties As Well so You Can See We Have Different Break Points so that My Web Part Is a Mobile Friendly if I Go Down to a Smaller Screen Just for You if I Go Down to a Smaller Screen You Can See that I'M She Didn't Seem Only One if I Go to Tablet Here I'Ll See You There I Love Can Be Controlled As Well these Are the Options once We Create that Object It Picks Up the the Data and each no Cards Here and Then Makes Them in a Nice Slider Carousel Swiper Thing What Else Is Good To Know Is like I'Ve Added that Library Here in the Dependencies in the Package | That Should Go to Your External Dependencies Here but for for the Purpose of this Simple Idea Is like that so You Can Boot It Easily and See What What It Does but Very Quickly if We Look at the Stats Again You See that this Is My Web Part and Then this Is Web Park Dependencies Diagram and You Can See that My Web Part Is Something like a 40k and the Swiper Libraries Is Most of My Bundles So Make Sure that When Your Whatever You Have External Libraries You Build Them as an External Libraries so They Can Be Reused across the Web Parts and They Don't Put More over Here in the Readme File of the Sample | So the New Stuff Is What We Went Through Earlier in this Core Which Is the Tenant Administrator Can Control What Are the Scopes Craft It's It a Big Client Deprecated It's GonNa Go Away Not Going To Be a Support Producer We Will Release the New Microsoft Craft Client Hopefully Today Might Be Is Still Slightly Delayed as Part of the One Point Four Point One Release There Will Be Documentation Replacements Everything Else on that One Do We Need To Update One Point Four Zero Protest One Point Four Point One Urgently Yes Would Be a Good Idea To Move There Do craf Api Spare Solutions Have Lots of Manual Steps in Azure Ad | As Part of the One Point Four Point One Release There Will Be Documentation Replacements Everything Else on that One Do We Need To Update One Point Four Zero Protest One Point Four Point One Urgently Yes Would Be a Good Idea To Move There Do craf Api Spare Solutions Have Lots of Manual Steps in Azure Ad Answer Is no There's no Actual Manual Steps Necessarily There and Now Us a Tonight at Minister Can Decide What Are My Scopes Which I Want To Support and Then You Don't You Can Configure those To Be Available and that's It Then Spf X Solution Doesn't Actually Impact on the Float
Quick Review of Episode 2 and Introduction to Episode 3 | Development using PnP SPFX Yeoman Generator | Anatomy of a Project | Files | Source (SRC) | Modify Our Webpart | Review and What's Coming Next
Introduction | Questions | SharePoint Development | SharePoint Server 2007 | SharePoint 2010 | SharePoint Server 2013 | JavaScript Injection | SharePoint Framework | Clientside Web Parts | Development Tool Chain | NPM | Run | Launch Visual Studio | Stiles | Lightning Tools | SharePoint Online | WorkBench | Stay with me | Lets go back | Get the slides | Contact Lightning Tools | Mastering the SharePoint Framework | What is the future of the Office Store | SharePoint Framework does not have a story around the Office Store | SharePoint Framework is designed for corporate developers or enterprise dev | SharePoint Framework is only supported on SharePoint Online | There is nothing stopping you from deploying SharePoint Framework to your tenant | How does the authorization work with native REST API | How does the authorization work with OAuth | How does the authorization work with SharePoint | How does the authorization work with AWS | Any problems | What Microsoft says | React | My preference | The I | Onprem | Lightning | Twitter
Agenda | Sharepoint Framework Overview | Sharepoint Extensibility Principle | What Does Sharepoint Framework Is Providing | What Is a Modern Page | Why Sharepoint Framework | Tools and Libraries | Open-Source Tooling | Github Site for Sharepoint Framework | Release Notes | How To Set Up the Office 365 Tenant | Search for Sharepoint Articles | Demo | Check the Node Version | Introduction of a Node Based Project | Default Scripts
Opportunities to Participate in PnP SPFx / JS SIG | Daily active users for custom SharePoint Framework components in M365 | The Road Ahead after 1.14 and future | PnPjs Client-Side Libraries | CLI for Microsoft 365 | Reusable SPFx Controls | PnP Modern Search | PnP SPFx Samples | Optional picture time! | Update Page Layout | WHAT IS MICROSOFT CLARITY? | SHAREPOINT SOLUTION
Overview of Command Sets | About command set & context menu | Demo Setup directory | Gulp Serve with the command bar | Gulp Serve with the context menu | Deploy to App Catalog | Recap
About Field Customizer | Yoman generates /Creates a custom list | Use SP Editor to update properties | Gulp Serve and debugging techniques | SPFx working field customizer | Deploy to App Catalog | Add Field Customizer to Existing field
Session objectives and takeaways . Session objectives: - Provide an introduction to development and deployment of SharePoint client | SharePoint Framework (SPFX) | SharePoint Framework Components | Client-side Web Parts | Open source tooling | Server side tool comparison | Tool Installation / Configuration .cmder (optional) | Tool Installation / Configuration (cont.) | Building blocks: BaseClientWebPart Class | Building blocks: Web part manifest | SharePoint Workbench | Client-side Web Part Build Flow | The Command Line yo enicrosoft/sharepoint - create new project / add new web part | Web Part Deployment Flow | Learning Topics • Web Stack Tooling
Introduction | Opportunities | Giant page | Sharing is Caring | SPFx Clientside Libraries Updates | CLI for Microsoft 365 | Reusable Components | SPFx Samples | Optional Picture Time | Demo | Code review | UI design | Notif demo | How does it work | What is socketio | Get List of socketio | Notifications | Giuliano | With Solution | Demonstration | Code | Outro
Building SPFx experiences for Microsoft Teams | Why SharePoint Framework for Microsoft Teams? | Latest status with SPFx for Microsoft Teams | Steps to get a SharePoint web part to work in Microsoft Teams | Microsoft Teams SDK natively available in the context | Microsoft Teams Toolkit - SharePoint Framework support | Microsoft Teams Toolkit v5 with improved debugging for SPFX
Developer Documentation | Agenda | Issues List | Issue List | Enterprise Solutions in Sharepoint to Microsoft Teams | Dynamic Data in Sharepoint Framework Components | Dynamic Data | When Will Sharepoint for a Framework Support Angular | Demo | Rich Editing of a Spreadsheet | Context Options | Computed Values | Auto Run Action | Reusable Controls | Spf X Components
Vesa Juvonen (Microsoft) – @vesajuvonen - Preview of Fluid Framework and SharePoint Framework integration | Ejaz Hussain (Content and Code) – @EjazHussain_ - Retrieving and presenting dynamic reports using Microsoft Graph data | Ramin Ahmadi (Content and Code) - @raminahmadi1986 – Using Material UI Components in SharePoint Framework solutions
Agenda | Microsoft Teams | Sharepoint Framework Updates Base | Reminders | Sharepoint Extensibility | Provisioning Service | Library Components | Library Component | Library Component Type | Npm Link | How Does It Know Where To Load the Library from Where It's Deployed | Updates | Beta 115 | Spf x Reusable Components | Code | This Web Cut that Part Can Be Quite Slow So if You Have a Time and Want To Improve and Fix these Issues in One Way or another Feel Free It's an Open Source Project That's Basically It so that's One More Thing I Could Show You because this Webpart Is Actually Built on the Sp of X 1 Point 7 0 plus Beta Version so It Means that It's Teams Tab Compatible so You Know When You Generate this as B of xa Project You Get this Team's Folder That Contains the Manifest File and the Logo Files and Then You Put It Together into a Zip File and that You Can Install It to Your Tenants App Catalog | That's Basically It so that's One More Thing I Could Show You because this Webpart Is Actually Built on the Sp of X 1 Point 7 0 plus Beta Version so It Means that It's Teams Tab Compatible so You Know When You Generate this as B of xa Project You Get this Team's Folder That Contains the Manifest File and the Logo Files and Then You Put It Together into a Zip File and that You Can Install It to Your Tenants App Catalog in Here by Uploading a Custom App another That You Can Pin It as a Tab | I Wanted To Go One Step Further and Start Programming against the Fitness Data so that We Can Use It in any Application or Mold It Further So Google but in Step Here Is Just Help Us Doing that and It Enables To Store and Access the User Data in the Fitness Store So Coming Back To Like How We Can Get Started with this Google Rest Api Edge so the First and Foremost Thing Is that We Should Have a Google Account To Start Using this and the Second Thing Is that We Should Generate both 2 0 Client Id and Client Secret | So the First and Foremost Thing Is that We Should Have a Google Account To Start Using this and the Second Thing Is that We Should Generate both 2 0 Client Id and Client Secret So for that We Can Use this Console Dot Developers Google Com and from Here We Can Generate a Client Id and Client Secret So Let Me Just Refresh this Alright So from Here We Can Create a New Project and Start Using It but Just To Save the Time I Already Have One Project Created I Will Start Using this So Firstly that Will Have To Setup the Credentials so I Already Have a Set It Up but this Page Will Help Us To Set Up the Credentials | It Is Kind of an Interaction of Google Aps from Spf X So for that Reason It Is It Is a Cross Domain Call So To Avoid any Kind of Course We We Need To Use or We Need To Authorize the Javascript Origins So for that Reason You Can See that I Have Added My Sharepoint Comm Site Here as Authorized of Javascript Origin and for Example if You Want To Test It on a Sharepoint Local Work Means You Can Also Add this Local Host : Four Three Two One as the Authorized Javascript Origin So this Will this Will Help Us To Build a Secure Connection | And Then We Get the Refresh Token and Access Token and from Here We Will Be Able To Make or Test Our Recipients So for that I Already Have some List of Aps Available So To Get to To Get to All the Appears Which Are Available to Us We Can Use this Http Get Method and with this Request Uri We Will Send this Request and Now that We Are Getting All the All the Operations Which Are Available to Us and from Here We Can Probably Search for Estimated Splits Right So All these Estimator Steps Will Give Us the Information about How Many Steps We Have Worked So Far and Then There Are Also Other Things like Leds | And It Is Trying To Get the Aggregate Data Set and for that We Have To Pass in some Information like this One I Will Explain What this Is So this Is from Here We Are Saying that Tom We Just Want To Know the Number of Estimated Steps Which Have Been Executed by the User and during Which Time Duration So this Is Just One One Sample Start Time and End Time during Which We Want To Calculate the Number of Steps So for Example if You Want To Get the Current Time Then Probably You Can Do Something like this All Right so You Can Just Type New Date in and this Will Give You the Numeric Representation of What Is the Time | So for Example if You Want To Get the Current Time Then Probably You Can Do Something like this All Right so You Can Just Type New Date in and this Will Give You the Numeric Representation of What Is the Time Now and You Can Probably Have It in the Start Time and Then You Can Go Out to the M Fill M of this Way Look at the End Time So once We Have this We Can Send It as a Request Body and Then Just Click Send the Request and Here We We Get the Entire Response like How Many Number of Steps That I Have | So in this Webpart Properties I Have Added the Client Id Field Which We Have Got from Earth 2 0 and Then Let Me Close this this Card To Change All Right So once We Have It I Will Just Click Log In with Google I Already Have Logged In so It Will Not Ask Me for the Login from but Here We Get a Little Like Number of Hours or Number of Minutes and Spend Today with any of the Activity the Distance What I Have Traveled and the Calories Which I Have Burned and the Number of Steps I Have Calculated | So I Will Quickly Move to this Main Method Which Is Get Google Food Data and Go Here Jump in but if You Could Just Sort Of Do a Quick Wrap-Up on What You Do and We Are Give Us a Chance To Close Out Alright Alright So Just Give Me One Minute I'Ve Ever Tried To Finish It Up So Almost at the End of the Demo So this Is the Main Maker You Get Google Food Data and from Here We Are Calling this Google Api Restful Api and Passing the Activity Scope and from Here We Get the Entire Response in in a Json Format
Introduction | How to get involved | Resources | SharePoint Framework | Previous Updates | Office CLI Updates | Reusable Components | SPFx Community Generator | Demos | Why SPFx | How to make it happen | Code perspective | Demo | Microsoft Teams | Graph Calendar | Code | Dark mode support | Tips and tricks | Graph Requests
What about SharePoint Framework? - How's the adoption of 3rd party solutions? | SharePoint Framework 1.10 release - what's included? | Training, certification and tools For Microsoft 365 developers | PnPjs Client-Side Libraries | PnP Office 365 CLI | Reusable SPFx Controls | Vincent Biret | The Problem | A few examples | What solutions? | Things the command does for you | Deep dive
Opportunities to Participate in PnP SPFX / JS SIG | What about SharePoint Framework? - How's the adoption of 3rd party solutions? | SharePoint Dev Roadmap | @ Reusable SPFx Controls
Introduction | Upgrading from SP.UI.* to SPFx Extensions | Demo | The initial Application Customizer implementation | The real Application Customizer implementation
Introduction | Chapter Overview | Working with command prompts | SharePoint solution & add-in vs. SharePoint Framework development | SharePoint Framework development toolchain overview | Setup SharePoint Online development environment | Set up app catalog | Create Site Collection | Node.js & NPM | Install Node.js with the installer | Install Node.js with NVM on macOS | Installing Node.js with NVM on Windows | Yeoman | TypeScript & type declarations | Gulp | DEMO: Install Gulp | Webpack | IDEs & editors
build the entire solution in javascript | create solutions with sharepoint framework | take a look at the performance of the page | create the zip file | build task modules using sharepoint framework | test your solution before publishing or releasing that to a customer | supporting a solution for sharepoint pages | publish your solution as a team solution | add a sharepoint framework solution | add the solution to the tenancy | configure the web part with preview documents | add the solution | optimizing our applications to the latest and modern browsers
Agenda | Sharepoint Framework Update | Recap on the Road Map | Modern Search Updates | Spfx Samples | Spfx Sample Repositories | New List Search Web Part Sample | Update to the Modern Calendar | List Item Menu Webpart | List Items Menu Web Part | Pnp Js Library | Property Field Spinner | React Hook | Get List Columns | Delegate Binding | Dependence Injection | Compose Element | Fluent Ui
Introduction | Agenda | Crisis Communication Site Template | SharePoint Framework Tutorials | SPFx Dr | SPFx Control | SPFx Omen Generator | Twitter Web Part Demo | Twitter Web Part Code | Twitter Web Part QA | React Web Part QA | Google React | Bing | Demo | Code | Microsoft Search | Comments Demo | Comments QA | Thank you | Questions | Templates | Communication Templates | Teams Template | SharePoint Starter Kits | New placeholder locations | SPFx site design tests | Hub side checking | Reusable | Wrap up
Introduction | I jumped the gun | SharePoint Framework update | SharePoint Framework growth | SharePoint Framework 17 | New assets and resources | Roadmap | Updates | Kamals introduction | Apply site design | Copy to clipboard | Convert to PDF | SEO function | SEO function code | Wrap up
Opportunities to Participate in PnP SPFX / JS SIG | What about SharePoint Framework? - How's the adoption of 3d party solutions? | SharePoint Dev Roadmap | PnPjs Client-Side Libraries | PnP Office 365 CLI | Reusable SPFx Controls | PnP SPEx Generator
Customize List Forms | Create a New Sharepoint Framework Project with a Form | Create a Project | Form Customizer | Form Customizer Specific Methods | New Form | Rendering | Recap
Introduction | Request to Present | Sharing is Caring | Recognition Program | SPFx Updates | Area updates | Picture time with Together Mode! | Nello D'Andrea & Nicole Beck Dekkara - Building real world Intranet with SPFx - Real time news | Mattias Bürgi & Fabian Hutzli - Deploying Azure dependencies for SPFx solution – case Real Time News | Anoop Tatti - Viva Connections card using React in QuickView to show FAQs as accordion | Closing
Agenda | Developer Videos | Open Source Repositories | Pnp Recognition Program | Sharepoint Framework Latest from Sharepoint Engineering | Microsoft Teams Development Improvements | Store Modernization | Pnp Js Client Side Libraries | List of Objectives | Github Action To Lock Closed Issues | Spfx Reusable Components | Pnp Modern Search | Pnp Spfx Samples | Adaptive Card Extensions | Adaptive Card Extension | Card View | Quick View | Baseline Template | Team's Toolkit Version 2 | Recap | Create a New Project | Creating a New Project | Create a New Microsoft Teams Application or Start from a Sample | Provisioning the Solution | Teams Toolkit
Intro | Scaffold a test Teams webpart | Teams Icons | Configure for Teams Tab | Build and Deploy | Sync to Teams | Add it to Teams | Outro and Learn More
Connect to a Data Source | Data Source Types | Sharepoint List | Map Specific Columns | Microsoft Graph | Connecting to the Graph Api | Microsoft Graph Explorer | How To Connect to the Microsoft Graph | Filters | Extended Properties | Custom Css | Additional Settings Screens | Mappings to Columns Which Create the Org Chart
Introduction | What is React | Angular vs React | Components | Concept | Comparison | Component | New Solution | State | Initialize State | State of Component | React Lifecycle | Component Element | Arrow Functions | Pass Argument | Virtual DOM | Theory | React Demo | React Components | React Events
What about SharePoint Framework? - How's the adoption of 3 party solutions? | PnPjs Clientside Libraries | Latest updates on PnP Client Side Libraries | SPFx Reusable Components | Reusable SPFx Controls | Expose More UX Surfaces for customizations
Microsoft Teams extensibility options | Overview of building a Microsoft Teams Tab | Tab Configuration and Content | Interacting with Microsoft Teams | How to Surface SharePoint Framework Web Parts as Microsoft Teams Tabs? | Create Microsoft Teams Tab Images | Create Microsoft Teams App manifest | SharePoint Framework & Microsoft Teams Context | Working with the Microsoft Teams Context
Developer Documentation | An Update on Sharepoint Framework | Issue List | Sharepoint Framework | Global Deployment of Sharepoint Framework Extensions | Dynamic Data in Sharepoint Framework Components | Sharepoint Framework 1 5 | Support for Beta Api | Custom Generators | Dynamic Data Support | Custom Generator Support | Weekly Beta Releases on Fridays | Office 365 Cli Updates | Skype for Business Demo | Dynamic Data | Connect to a Specific Data Source | Dynamic Data Controller | Get Selection | Render Method | If I Just Scroll Down through all of this Stuff Is Just Configuration Stuff so if I Scroll Down Here at the Bottom It's Simply Going To Display the Details of the Event That Was Passed In So Let Me Jump Back One More Time and I Said Well Right Here's the Line I Want To Call Up for a Second So I'Ve Got a Reference to a Source and I'M GonNa Call this Get Property Value this Get Property Value Event Here or this Method this Is Being Defined on My Source My Source if You Recall Was My Event Web Part so if I Come Back Over to My that Web Part He Should Have a Method | It's Simply Going To Display the Details of the Event That Was Passed In So Let Me Jump Back One More Time and I Said Well Right Here's the Line I Want To Call Up for a Second So I'Ve Got a Reference to a Source and I'M GonNa Call this Get Property Value this Get Property Value Event Here or this Method this Is Being Defined on My Source My Source if You Recall Was My Event Web Part so if I Come Back Over to My that Web Part He Should Have a Method Called | The Bing Map Control if You Want To Take a Look at this Sample What I Would Recommend You Do Is Head Over to the Sharepoint Organization and Github Go to the Sp Dev Effects Web Parks You Go into the Samples and There Is a React React Events Dynamic Data You Scroll Down Here and Tells You How To Get It Up and Running the One Thing That I'Ll Just Mentioned It's Not Here in this List Is It Does Talk about the Fact that You Need To Deploy It to an App Catalog in Your Tenant this Isn't Going To Run Local because Part of the Provisioning Process of the Component It Creates the List and Adds those Three Events inside of It | So the Business Need Is a Web Part Where We Have a Pnp Ice-Cream Shop and We Order Ice Cream Here and if I Select Something like a Lot of Just Order of the New Ice Cream and I'Ll Change the Quantity Here and You Can See How the Price Changes so We Try Calculate Something on the Back End if I Order Something It Will Just Show Success I Just Ordered Six from no Ice Creams Here So this Information Comes from Sharepoint Lists That's One Sharepoint List Here with the Defendant Ice Cream Flavors There Is Not a List That Stores the Orders | And We Are Also Whenever You Click on that Buy Button You'Re Adding New Item to to another List Here this Is the Web Part Typical Business Case as I'Ve Said Now We Have the Tests Here Separated by the Different Test Suites Here but I Will Just Run the Test Show You How It Works So I Will Type Npm Test and the Test Run Will Start and See How I Run Npm Test Not Go Test this Is Important because We Need To Run Npm Test Instead of Go Please Go Please Real Will Fire the out-of-the-Box Testing Framework That's Based on Mocha | And I'Ll Try To Find that H1 Using Enzyme Helpers and More Specifically I'M Trying To Find the Text without H1 Element and if that Exists I'Ll Try To Compare It with a String and See if if I Have the Correct Title Pretty Simple the Only Missing Piece Here Is Where It Up React Component Key from and It Came from the before each Set Up So I'M Mounting the Reactor Component on for each Group Here and You Can See that I'M Creating that Element I'M Using My Port Here a Bunch of Properties to to To Just Create the Element | And Jeff Will Automatically Recognize that You Have Changed Only One or Two Files and if You Try To Run on We Lose this Here Let's Let's Let's See How It Works So I'Ll Just Run that Configuration It Will Spin Up the Debugger and Everything through the Videos to Your Code and I'Ll Try To Fail a Test Here I'Ll Try To Fill that Very Good Now I Will Save that File with My New Expectation Here So Let's See What's It's It's Blazingly Fast for Me To Understand that I Did Something Wrong Here | If You Open Up the Unit Test and the Expectation Is the Upstream but Instead We Received that Streamer Please Step Forward if You'Re Using that Navigation It Will Land on that Specific Line That We Can Change Fletcher and See Why It's Failing Here Now We Can Go Further and We Can Place a Breakpoint Here if that Information Is Not Enough for You You Can Use the Debugging Capabilities and I'Ll Change It from One to Two To Show You that We Have that It Will Execute Again Indeed Will We Immediately | When You Have To Report Something or We Have To Stick in a Dashboard in Your Vsds Tool or in Jenkins To Report Coverage or Summaries on those Tests so You Have All these Reports Generated for You Here and Finally Is the Coverage Threshold I Was Talking about so You Can Control the Threshold Here and It Will Fail the Node Js Process with Error or with Success Based on the Dose Thresholds Here So if You Put a Hundred Percent Coverage from Branches Functions Lines and Salesmen's It Will Fail if if You Don't if You'Re Not if You'Re Not within that Threshold
Intro | Opportunities to Participate in PnP SPFX / JS SIG | SharePoint Framework usage worldwide-growth continues | The Road Ahead - What we are working on? | PnPjs Client-Side Libraries | PnP Office 365 CLI | Reusable SPFx Controls | PnP Modern Search | PnP SPFx Samples | Bo George | Why Build It? | Community Shout Outs! | Project Upgrade | What is Code Tour? | Microsoft 365 developer community calls
Intro | XCode Command Line Tools and Node Version Manager (NVM) | Install Node 14 | Other bits | Install VS Code for Apple Silicon | Other important bits to mention
SharePoint Framework in a nutshell | SPFX Toolchain | SPFx SharePoint Story | Microsoft Teams + SPFx | Planet Explorer | Microsoft Teams meeting apps | Code Samples | Advanced Capabilities | Objectives | Resources
The Form Customizer Extensions | To Create a Form Customizer Extension with Sharepoint Framework | Create a Form Customizer Extension | Sharepoint Framework for Customizer | Form Customizer | The Form Customizer | Document Library
Intro | SharePoint Framework Extensions | Project Structure | Tenant Wide Deployment | List Tenant Wide Extensions | Field Customizer Class | Deploying Field Customizers as a Site Column | List View Command Sets | Defining Command Set Buttons | Command Set Class
The Broadcast Is Now Starting All Right Here We Are Thank You Everyone for Joining Us Welcome to the Next Episode of Pixel Mill Webinar Series and this Edition of Build Your First Sharepoint Framework webpart My Name Is Michael Wells I Am the Community and Partnerships Manager Here at Pixel Mel and Again Thank You for Joining Us a Couple Quick Housekeeping Things We Will Be Recording the Session So if You Miss Anything You Might Want To Go Back and Check It Out Later We Will Have a Video Up Hopefully by Monday I'ma Keep an Eye Out for that after We'Re Done Here Also | We Will Be Recording the Session So if You Miss Anything You Might Want To Go Back and Check It Out Later We Will Have a Video Up Hopefully by Monday I'ma Keep an Eye Out for that after We'Re Done Here Also if You Have any Questions at any Time throughout the Webinar Please Feel Free To Put Them in There Should Be a Chat or Questions Spots Available for You Guys To Enter those in I'Ll Be Monitoring that and I Will Try To Interrupt Eric as I Can if We'Re Not Able To Get to It during the Webinar | Please Feel Free To Put Them in There Should Be a Chat or Questions Spots Available for You Guys To Enter those in I'Ll Be Monitoring that and I Will Try To Interrupt Eric as I Can if We'Re Not Able To Get to It during the Webinar There Is Going To Be a 15-Minute Q & a at the End so We'Ll Try To Catch Everything at that Time without Further Ado I'Ll Stop Talking Here Is Our Man of the Hour Mr Eric Overfilled Take It Away All Right Good Morning Good Afternoon Everybody Really Appreciate You Joining Us I'Ve Got My Housekeeping Stuff on this Session All Right so this Is to Me a 101 Series Intro to Sharepoint Framework Webpart Now When I'Ve Given this as a Presentation | I Would Normally Ask a Everyone Raise Your Hand if They'Ve Been Working with the Framework or Not in this Case What I'M Going To Be Assuming Is Is that You Probably Are Somewhat New to the Framework or Maybe You'Ve Touched It a Little Bit We'Re Going to We'Re Going To Start from the Beginning but We'Re Going To Quickly Go Through and Look at What Other Features Are Available within the Framework and How To Really Get Started and Learn More this Is Not a One-Hour Topic this Is a You Know Multi-Day Topic if You Really Want To Get Started with It so My Idea Here Is To Just Give You the Intro Help You Get Started so that You'Ve Seen It and Take Place You'Ve Seen It Work Out and Then We'Ll Go from There Four Major Demo Three of Them Are Code Based I Like all of the Codes That You May Want You Can Get Right Now Over at Github Comm / E Overfilled Slash the Sps X-Demos | As Well as if You Want the Slide Deck You Can Get that Now from the Pixely Address You'Ll See in the Lower Right Hand Corner the Capitalization Is Important to Capital Eo Sp Fx Intro Yeah So with that Let's Go Ahead and Kind Of Get Started Here Kick this Off First Who I Am for those of You Who I Have Not Had the Pleasure of Meeting Yet My Name Is Eric Overfilled I'M President Co-Founder of Pixel Mill Fix Ml We We We Kind Of Help Clients To Do What We'Re Going To Be Going Over We Help Them Build Portals on Top of Sharepoint So if You'Re Looking To Leverage Office 365 or Sharepoint on-Prem | Model That Would Allow You To Have Provider Hosted Apps Where You Could Build the Logic and You Could Then Offload It onto some Other Services some Other Server Maybe You Could Put It over an Azure Etc but It Would Keep Sharepoint Itself Free of Your Custom Code Which in a Cloud World Was Necessary because Microsoft Can't Trust that Your Code Isn't Going To Do Bad Things So if You Want To Have some Custom Stuff You Can Go Put It Over in Your Own Azure Environment Running on Iis Just Have Sharepoint Link Over to It It Worked It's Still Available and It Is Still Fully Supported | We'Re Not Having To Use a Script Edit a Web Part or some Sort of Weird Javascript Injection or Javascript Embed To Make All this Work We'Re Able To Use the Tool Chain That the Tooling that the Framework Provides Runs some Simple Commands in Powershell It Creates First Packages Which We Then Upload into Sharepoint or We Can Use Pnp To Upload in the Sharepoint To Then Be Able To Utilize Our Webparts within Our Site Collections and Sites Which Just Really Cool Stuff the Last Thing I Want To Talk about Is the Iframe so if any of You Have Used the Add-In | You Want To Actually Deploy Your Web Part into Sharepoint Which I Assume You Want To Do You Will Need To Have an App Catalog That's a Whole Session In and of Itself I Did You a Link To Go Create Your Own App Catalog these Aren't Don't Already Have One It's Pretty Easy To Do It's Just I Don't Really Want To Spend the Time Now To Go over Something You Can Just Follow some Easy Instructions You Need a Workstation You Need some Place To Build this | If You Want that Powershell Script That I'M Running through Right Now I'Ve Even Provided that in the in that Git Repo I Do some Other Cool Codes That I Think You Might Find Useful but I'M Going To Go Over Of Course Just the Intro Stuff Right Now so that's It I Mean Pretty Simple Development Environment Now that I'Ve Got the Text Editor I Can Then Start To Try To Build My First Web Part Code Okay How We'Re Going To Do that Let's Go Ahead and We'Re Going To Create a Folder Where We'Re Going To Put Our Web Part It Can Be Anywhere in Your Workstation | But I'M Going To Go Over Of Course Just the Intro Stuff Right Now so that's It I Mean Pretty Simple Development Environment Now that I'Ve Got the Text Editor I Can Then Start To Try To Build My First Web Part Code Okay How We'Re Going To Do that Let's Go Ahead and We'Re Going To Create a Folder Where We'Re Going To Put Our Web Part It Can Be Anywhere in Your Workstation that You that You Want although of Course I Would Recommend You Put It some Logical Location You'Ll Change to that Folder of Course | You Can Add As Many Webparts as You Want Effectively as Many Webparts as You Want to a Given Project or a Given Solution and every Time You Run It Again It Will Take Less than a Second To Add another Web Part So Really the First Time You'Re Just Going Grabbing the Whole Tool Chain All the Node Modules Needed in Order To Build a Web Part but You Can Then Add More More and More Web Parts to the to a Given Solution Which I Highly Recommend if You'Re Building a New Solution for an Organization You Really Want To Bundle all of Your Web Parts into Ideally One or Maybe Two Solutions You'Ll Create One Folder Run the Element Command Once and Then You'Ll Run It Again and Again in that Same Solution Folder | That Way You Don't Have To Upload Anything into Sharepoint To Test Your Web Part Out at this Point Your Web Part Can Start Interacting with Sharepoint Data with Full Authentication You Don't Have To Worry about Authenticating with Sharepoint To Go Grab Data the Web Part Already Takes Care That for You It's Supposed To Be That Simple So Let's Go Ahead and Get that Started the Way We'Re Going To Do It this Time We'Re Going To Go Ahead and We Are Going To Do this in Two Spots I'M Going To Change to It a New Folder Actually I Need To Make a New Folder Here | This Should Be Quicker this Time There We Go It's a Little Easier To Read so We Need To Give It a Solution Name So this Would Be the Solution of the Folder Itself the Solution Itself Not Your Web Part but I'Ll Just Call It Hello World I'M Going To Use the Current Folder That's Fine I'M Going to I Have Choices of Frameworks That Are Pre-Built for Us I'M Going To Go with the Known Javascript Framework if You Intend To Use React You Could Just Go Down To React I Need To Give It a Name Sure Hello World Fine a Description There We Go and Now Go Grab a Cup of Coffee so What You Can See at the Bottom Is Happening Is all of the Node Modules Are Being Created That's Going To Take Too Long I'M Going To Go Ahead and Skip that Well I'M Going To Leave It Running but We'Re Going To Go Ahead and Let's Look at the Hello World Web Part That Was Currently Created for Us and that's this this Hello World Thing | Typing Folder | Custom Properties | Web Part Files | Get External Data | Hello World Solution | Sharepoint Data | Render the List | Custom Properties Dynamic | Typescript | On Property Fields Change | Render Function | Live Demo | External Libraries | Recap | Recommendations | Resources | React Web Part Demo | What's Coming Up Next
Opportunities to Participate in PnP SPFx / JS SIG | Slide of Links | COMMUNITY | CLI for Microsoft 365 | Reusable SPFx Controls | PnP SPEx Samples | Adaptive Card Extensions (ACE)
The Microsoft Cloud Show | The Tool Box | Tenant Properties | Sharepoint Rest Api | Office Ui Fabric | Latest Version of the Sharepoint Framework | Asset Packaging | Deploy a Sharepoint Framework Component | Configured Cdn | Site Collection App Catalogs | Graph Http Client | Angular Versioning | Angular 2 | Angular 4 | Angular 5 | Angular Elements | Web Component | Where Can You Learn More | Free Resources | Is There any Insight into Using Sharepoint Framework To Control Master Pages and Other Menu Type and Common Layout Items in the Modern Experience | Common Layout Items | Recap
Agenda | Opportunities to Participate in PnP SPFx / JS SIG | The Road Ahead - 1.15 Release - ETA June 2022 | PnPjs Client-Side Libraries | CLI for Microsoft 365 | Reusable SPFx Controls | PnP Modern Search | PnP SPEx Samples | Optional picture time! | SharePoint Framework experiences in Microsoft 365 | List extensibility roadmap
What Is a Cr Point Framework Extension | Application Customizer | Develop a Application Customizer | Load Debug Script | Deploy the Spf X Application Customizer | Upload this Package File to the App Catalog Site | Add the Solution
Intro | What is the SPFX Solution Accelerator? | Features of the SPFX Solution Accelerator | Overview of the Services Framework | Services included in the framework | Developer Service | Creating a Custom Service | Events Service Descriptor | Service Implementation
Opportunities to Participate in PnP SPFX / JS SIG | The Road Ahead - What we are working on? | PnPjs Client-Side Libraries | @ PnP Office 365 CLI | @Reusable SPFx Controls | PnP SPFx Samples | Microsoft 365 developer community calls
Intro | SharePoint - Evolution across versions | Server Side Development | Client Side Development | What is SPFx? | How SPFx is different? | The SharePoint Framework is made for "Modern Pages" | SPFx Client-Side WebParts | Script Editor WebParts vs App Parts vs SPFx WebParts | Light weight Components / Tools Used | Skills You Need to Embrace | Node.js Overview | NPM (Node Package Manager) | Updating Install | Updating NPM packages | Gulp Task and Build Manager | TypeScript (Typed JavaScript) | Yeoman (SharePoint Solution Generator) | Visual Studio Code | Workbench | Flow of Client Side Web Part | Build Your First SPFx WebPart
Opportunities to Participate in PnP SPFX / JS SIG | PnPjs Client-Side Libraries | CLI for Microsoft 365 | Reusable SPFx Controls | PnP SPFx Generator | PnP Modern Search | Optional picture time! | The Road Ahead for SPFX
Speaker Introduction | SharePoint Development Model - Journey | Why SPFX | Development Toolchain Comparison | Focus on what you need to know | Focused Command
Opportunities to Participate in PnP SPFX / JS SIG | PnPjs Client-Side Libraries | CLI for Microsoft 365 | PnP SPEx Samples | Optional picture time! | Microsoft 365 developer community calls
Definitive guide for developers: SharePoint Framework for SharePoint Server 2016 | Installing developer tools for macos | Installing developer tools for Windows
start with a clean table | expose this webpart as a single part | expose this at a sharepoint full page | save any width or any modern page as a template | create additional set of your own templates | create a non specific site | configure the settings | get rid of the header section and header settings
Introduction | Request to Present | Sharing is Caring | Recognition Program | SPFx Updates | Area updates | Picture time with Together Mode! | Nello D'Andrea & Nicole Beck Dekkara - Building real world Intranet with SPFx - Personalized apps per user | Marcin Wojciechowski - Accelerating App Development: Advanced Topics in Vite + SPFx | Closing
Introduction | What’s getting killed this week? | Why does it matter? | My Opinion on the retirement of isolated web parts | Guidance - what should you do?
Introduction | Request to Present | Sharing is Caring | Recognition Program | Area updates | Picture time with Together Mode! | Mohammed Amer (Atea Global Services) - Enhance Your SharePoint Search Journey with a Custom Copilot | Ejaz Hussain (Advania UK) - Real Time User Interactions with Documents using Azure App Insights | Hugo Bernier (Takeda) - Using Azure OpenAI assistant APIs with SPFx – Part II | Closing
Introduction | Updated support for React & Office UI Fabric React | What version SPFx is in SharePoint Server Subscription Edition? | How do use React v16 & Office UI Fabric React v7 in SPFx v1.5.0 projects? | Conclusion? More questions than answers… | Guidance & Recommendations
initialize the project with a readme | installing nodejs | put this in a test folder | add a new publish test | add another step search for publish code coverage | bundle the solution with a gulp | publish artifacts | use the node installer | setting variables for your environment | create release with a little rocket icon in the corner | open a device login web page
Introduction | Transforming classic UI Extensions to SharePoint Framework Extensions | Demo | Understanding the SPFx generated code | Digging into the SPFx UI Extension for List View Command Set
Introduction | Request to Present | Sharing is Caring | Recognition Program | SharePoint Framework roadmap | Area updates | Picture time with Together Mode! | Markus Möller (Avanade) | @Moeller2_0 - SPFx extension for search-driven navigation and security controls | Chris Kent (Takeda) | @thechriskent - Extending your Teams manifest for Copilot, SPFx, Power Apps, and more | Paolo Pialorsi (PiaSys) | @paolopia – Patterns for Consuming Microsoft Graph via Azure Services in Viva Connections ACE cards | Closing
Introduction | What is PnPjs | PnPjs Packages | Visual Studio Code | Installing PNPjs | Read operation | Get list title | Dropdown | SharePoint Workbench | Create SharePoint List | Create SharePoint Button | Service Learning
Introduction | Let's get set up | Build the "Welcome Webpart" in JavaScript (Typescript) | Build the "Welcome Webpart" in ReactJS (Typescript) | Build the "Welcome Webpart" in VUE.js (Typescript)
Introduction | Customize the user experience | Extending access to business apps with native extensions | Host web apps | Focus on building web apps - not Microsoft 365 apps | Strive to use Microsoft 365 extensibility points as hosts for your web apps | But what about SSO, tokens, data access APIs, web part properties, …? | What others are saying | Building web apps provides more options | Use Microsoft tools, hosts, and clients as extension points | Building Microsoft Teams apps as web apps
Introduction | Project Structure | Web Part Class | Web Part Properties | Manifest File | CSS Modules | Configuration Files | Build Flow | Tasks | Solution Packaging | Clientside Web Parts | Clientside Web Parts Demo | Updating the Web Part | Modifying the Public Properties | Finding Icons | SharePoint Workbench | Debugging Experience | Source Code Mapping Files | Adding a SharePoint Framework Web Part | Adding a Web Part to a Modern Page | Testing the Web Part | SharePoint Framework Utilities | Status Renderers | Loading Indicator | Error Indicator | Display Mode | Page Context | Web Part Location | Environment Type | Displaying Environment Type | Logging | Logging Demo | Component Loader | Demo | Conclusion
Introduction | Request to Present | Sharing is Caring | Recognition Program | SPFx Updates | Area updates | Picture time with Together Mode! | Nello D'Andrea & Nicole Beck Dekkara - Building real world Intranet with SPFx - Multilingual document cards | Marcin Wojciechowski - Accelerating App Development: Introduction to Vite + SPFx Stack | Closing
Introduction | Remove a Custom Form | Integrate Power Apps | Increase Form Width | ProjectStart Default to ID 1 | Adding Project Title | Milestones have 0 duration | Progress bar for Progress | A Couple more Executive Decisions | Testing | Give Thanks to Geert!
